/********************************************************
Checkbox Custom
*********************************************************/
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  background: #ffffff url('assets/checkbox.gif') top center no-repeat;
  position: absolute;
  left:0; top: 2px;
  width: 16px; height: 16px;
  //box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '';
  background: #ffffff url('assets/checkbox.gif') bottom center no-repeat;
  position: absolute;
  left:0; top: 2px;
  width: 16px; height: 16px;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  background: #ffffff url('assets/checkbox.gif') center center no-repeat;
}

/********************************************************
Radio Custom
*********************************************************/
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  background: #ffffff url('assets/radiobutton.gif') top center no-repeat;
  position: absolute;
  left:0; top: 2px;
  width: 16px; height: 16px;
  //box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '';
  background: #ffffff url('assets/radiobutton.gif') bottom center no-repeat;
  position: absolute;
  left:0; top: 2px;
  width: 16px; height: 16px;
}
/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  background: #ffffff url('assets/radiobutton.gif') center center no-repeat;
}


[type="radio"].multi:not(:checked) + label:before,
[type="radio"].multi:checked + label:before {
  background: #ffffff url('assets/radiobutton-multilines.gif') top center no-repeat;
  height: 32px;
  line-height: 16px;
}

[type="radio"].multi:not(:checked) + label:after,
[type="radio"].multi:checked + label:after {
  background: #ffffff url('assets/radiobutton-multilines.gif') bottom center no-repeat;
  height: 32px;
  line-height: 16px;
}
[type="radio"].multi:disabled:not(:checked) + label:before,
[type="radio"].multi:disabled:checked + label:before {
  background: #ffffff url('assets/radiobutton-multilines.gif') center center no-repeat;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}


form{ 
	@include placeholder {
	    font-style:italic;
	}
	

	.styled-select{
		height: 30px;
		line-height: 30px;
		padding: 0;
		background: url(assets/select-arrow.gif) no-repeat right white;
		border: 1px solid #cccccc;
		overflow: hidden;

		select{
			background: transparent;
		   	width: rem-calc(310);
		   	line-height: 20px;
		   	padding: 5px;
		   	border: 0;
		   	height: 30px;
		   	-webkit-appearance: none;
		}

		&.x-large{ 
			width: rem-calc(450);
			select{
				width: rem-calc(470);
			}
		}

		&.medium{ 
			width: rem-calc(190);
			float: left;
			select{
				width: rem-calc(210);
			}
		}

		&.tiny{ 
			width: rem-calc(125);
			float: left;
			select{
				width: rem-calc(140);
			}
			&:not(:last-of-type){
				margin-right: rem-calc(10) 
			}
		}
		
		
   		
	}
	
}